<template>
  <div v-loading.fullscreen.lock="pageLoading">
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">明细表</span>
        </el-col>
      </div>
      <el-form :model="criteriaForm" ref="basisForm" size="mini" label-width="65px">
        <el-row :gutter="24">
          <!--查询条件-->
          <el-col :span="8">
            <el-form-item label="入库日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="criteriaForm.amoebaWaybillQuery.rangeInStockDate"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="海外仓=处理时间"
                              end-placeholder="非海外仓=入库时间" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="入库时间">
              <el-date-picker type="datetimerange" :editable="false" :picker-options="pickerOptions" v-model="criteriaForm.amoebaWaybillQuery.rangeInStockTime"
                              format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" start-placeholder="海外仓=处理时间"
                              end-placeholder="非海外仓=入库时间" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="签收日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="criteriaForm.amoebaWaybillQuery.rangeSignDate"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}"
                              start-placeholder="海外仓=处理日期"
                              end-placeholder="非海外仓=签收日期"
                              range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="签收时间">
              <el-date-picker type="datetimerange" :editable="false" :picker-options="pickerOptions" v-model="criteriaForm.amoebaWaybillQuery.rangeSignTime"
                              format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}"
                              start-placeholder="海外仓=处理时间(带时分秒)"
                              end-placeholder="非海外仓=签收时间" range-separator="至" clearable></el-date-picker>
            </el-form-item>

            <el-form-item label="结算日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="criteriaForm.amoebaQuery.costDate"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                              end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="创建日期">
              <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="criteriaForm.amoebaQuery.cdateDate"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                              end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="费用名称">
              <el-select v-model="criteriaForm.amoebaQuery.costId" filterable multiple placeholder="请选择费用名称" :style="{width: '100%'}">
                <el-option v-for="(item, value) in configPayMap" :key="value" :label="item" :value="value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="阿米巴科目名称" label-width="100px">
              <el-select v-model="criteriaForm.amoebaQuery.amoebaSubjectId" filterable multiple placeholder="请选择阿米巴科目名称" :style="{width: '100%'}">
                <el-option v-for="(item, value) in amoebaSubjectNameMap" :key="value" :label="item" :value="value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="阿米巴关联科目" label-width="100px">
              <el-select v-model="criteriaForm.amoebaQuery.settleAmoebaSubjectId" filterable multiple placeholder="请选择阿米巴关联科目" :style="{width: '100%'}">
                <el-option v-for="(item, value) in amoebaSubjectNameMap" :key="value" :label="item" :value="value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="阿米巴费用来源" label-width="100px">
              <el-select v-model="criteriaForm.amoebaQuery.amoebaOutOrigin" filterable placeholder="请选择阿米巴费用来源" :style="{width: '100%'}">
                <el-option v-for="(item, value) in originTypeMap" :key="value" :label="item" :value="value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户">
              <el-select v-model="criteriaForm.amoebaWaybillQuery.customerId" filterable :filter-method="remoteCustomer" placeholder="请选择客户" :style="{width: '100%'}">
                <el-option v-for="item in customerMap" :key="item.id" :label="item.text" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属人">
              <el-select v-model="criteriaForm.amoebaQuery.settleManIds" filterable multiple placeholder="请选择所属人" :style="{width: '100%'}">
                <el-option v-for="(item, value) in userMap" :key="value" :label="item" :value="value"/></el-select>
            </el-form-item>
            <el-form-item label="所属部门">
              <el-select v-model="criteriaForm.amoebaQuery.belongDepartIds" placeholder="请选择所属部门" multiple filterable :style="{width: '100%'}">
                <el-option v-for="(item, value) in belongGroupMap" :key="value" :label="item" :value="parseInt(value)"/>
              </el-select>
              <div v-if="hasSelect == 1">
                <el-tag type="info" size="mini" v-for="(item,value) in selectMap" :key="value" :label="item" style="margin-right:10px" @click="selectDepart(value)">{{item}}</el-tag>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="运单号" prop="waybillNoText">
              <el-input v-model="criteriaForm.amoebaWaybillQuery.waybillNos" type="textarea" placeholder="请输入运单号,多个换行隔开"
                        :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="M单号" prop="masterNumberText">
              <el-input v-model="criteriaForm.amoebaWaybillQuery.masterNos" type="textarea" placeholder="请输入M单号,多个换行隔开"
                        :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px;margin-bottom: 30px">
          <el-col :span="4" style="margin-left: 10px;">
            <el-button size="mini" type="primary" @click="doExportAmoebaProfit">导出明细表</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  import {ajax, searchCustomerLimit} from "@/store/yg/common/utils";
  import axios from "axios";
  import * as constant from "@/store/yg/common/constant";

  export default {
    components: {},
    props: [],
    data() {
      return {
        pageLoading: false,
        criteriaForm: {
          amoebaWaybillQuery:{
            waybillNos: null,
            masterNos: null,
            rangeInStockDate:[],
            rangeInStockTime:[],
            rangeSignTime:[],
            rangeSignDate:[],
            customerId:null
          },
          amoebaQuery:{
            cdateDate:[],
            costDate:[],
            settleManIds:null,
            belongDepartIds:null,
            costId: null,
            amoebaSubjectId: null,
            settleAmoebaSubjectId: null,
            amoebaOutOrigin: null
          },
        },
        customerMap: {},
        userMap: [],
        belongGroupMap: [],
        userDepartSelectMap: {},
        selectMap: { '2':'客服部', '3': '销售部', '10': '全选', '-1': '全不选'},
        hasSelect: 0,
        configPayMap: [],
        amoebaSubjectNameMap: [],
        originTypeMap: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
      this.initAmoebaProfit();
    },
    methods: {
      selectDepart(op){
        const departIds = this.userDepartSelectMap[op];
        console.log(departIds);
        this.criteriaForm.amoebaQuery.belongDepartIds = departIds;
      },
      initAmoebaProfit() {
        const attrs = {
          class: 'com.tofba.app.client.amoeba.AmoebaDetailExportClient'
        };
        ajax("toExportAmoebaDetail", {},attrs)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              //this.customerIdOptions = res.data.customerIdOptions;
              this.userMap = res.data.userMap;
              this.belongGroupMap = res.data.belongGroupMap;
              this.hasSelect = res.data.hasSelect;
              this.userDepartSelectMap = res.data.userDepartSelectMap;
              this.configPayMap = res.data.configPayMap;
              this.amoebaSubjectNameMap = res.data.amoebaSubjectNameMap;
              this.originTypeMap = res.data.originTypeMap;
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      async remoteCustomer(query) {
        if (query !== '') {
          this.customerMap = await searchCustomerLimit(query);
        } else {
          this.customerMap = {};
        }
      },
      doExportAmoebaProfit() {
        console.log(this.criteriaForm);
        this.createExportAmoebaProfitTask(this.criteriaForm);
      },
      async createExportAmoebaProfitTask(params) {
        this.pageLoading = true;
        let attrs = {};
        attrs["headers"] = {
          "YG-UNIQUE-KEY": "do_export_amoeba_detail" + new Date().getTime()
        };
        const data = await ajax("exportAmoebaDetail", params, attrs);
        this.pageLoading = false;
        if (data.path) {
          // window.open(constant.FILE_SERVER + data.path);
          var path = (path = constant.FILE_SERVER + data.path);
          location.href = constant.API_SERVER + "/open/downloadFileByHttp?fileName=&path=" + path;
        } else {
          this.$message.error(data.errorMesage);
        }
      }
    }
  };
</script>
<style></style>
